/*
 * @description: 商城财务账户设置
 * @Author: along
 * @Date: 2020-04-12
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="container account-setting">
        <!-- title -->
        <div class="container-header">
            账户设置
        </div>

        <!-- content -->
        <div class="container-setting">
            <div class="alipay">
                <p class="alipay-title">
                    设置支付宝账号
                </p>
                <div class="alipay-wrap">
                    <img
                        src="@/assets/image/alipay-logo.png"
                        alt="加载失败"
                        class="alipay-logo"
                    >
                    <p
                        class="alipay-account"
                        :style="{opacity: appStatus.alipay.alipay_logon_id ? 1 : 0}"
                    >
                        支付宝账号: {{ appStatus.alipay.alipay_logon_id }}
                    </p>
                    <el-button
                        type="primary"
                        size="small"
                        class="alipay-setting"
                        @click="fnAlipay()"
                    >
                        {{ alipay_status }}
                    </el-button>
                    <el-steps
                        :active="alipayStatus"
                        :align-center="true"
                        finish-status="success"
                    >
                        <el-step
                            title="资料完善"
                        />
                        <el-step
                            title="确认签约"
                        />
                        <el-step
                            title="完成"
                        />
                    </el-steps>
                </div>
            </div>
            <div class="weixin">
                <p class="weixin-title">
                    设置微信账号
                </p>
                <div class="weixin-wrap">
                    <img
                        src="@/assets/image/weixin-logo.png"
                        alt="加载失败"
                        class="weixin-logo"
                    >
                    <p
                        v-if="appStatus.wxpay.bank_account_verify == -1"
                        class="alipay-account"
                    >
                        银行卡审核状态: 审核失败{{ audit_fail_reason.length ? '(' + audit_fail_reason.join() + ')' : '' }}
                    </p>
                    <p
                        v-else
                        class="alipay-account"
                        :style="{opacity: appStatus.wxpay.account_number ? 1 : 0}"
                    >
                        微信账号: {{ appStatus.wxpay.bank_name }}{{ appStatus.wxpay.account_number }}
                    </p>
                    <el-button
                        type="primary"
                        size="small"
                        class="weixin-setting"
                        @click="fnWeixin()"
                    >
                        {{ status }}
                    </el-button>
                    <el-steps
                        :active="step"
                        :align-center="true"
                        finish-status="success"
                    >
                        <el-step
                            title="资料完善"
                        />
                        <el-step
                            title="账户验证"
                        />
                        <el-step
                            title="确认签约"
                        />
                        <el-step
                            title="完成"
                        />
                    </el-steps>
                </div>
            </div>
        </div>

        <!-- desc -->
        <be-careful
            :style="{minHeight: '369px'}"
        />
    </div>
</template>

<script>
import beCareful from '@/components/manage/account/be-careful';
import { mapState } from 'vuex';
export default {
    components: {
        beCareful
    },
    data () {
        return {
            activeName: 'last',//tab所在位置 first: 原商城财务 last:新商城财务
            step: 0,
            alipayStatus: 0, //支付宝申请状态码
            weixinStatus: 0, //微信申请按钮文案
            result: {},//微信申请结果
            status: '',//微信按钮状态
            alipay_status: '',//支付宝按钮状态
            alipay_result: {},//支付宝申请结果
            appStatus: {
                alipay: {
                    alipay_logon_id: '',
                    status: 0
                },
                wxpay: {
                    status: 0,
                    bank_name: '',
                    account_number: '',
                    bank_account_verify: ''
                }
            },
            audit_fail_reason: []
        };
    },
    computed: {
        ...mapState({
            flag: state => state.common.account_status,
        })
    },
    watch: {
    },
    mounted () {
        this.$store.commit('header/SET_HEADER',[{ title: '校园商城' }, { title: '商城财务' }, { title: '账户设置' }]);
        this.init();
    },
    methods: {
        /**
         * @description 初始化数据
         */
        init () {
            this.getStatus();
            this.getAppResult();
        },

        /**
         * @description 查询申请状态
         * @param  {Number}  //status 状态, 0:待提交, 1:待资料检验, 2:待验证账户, 3:待审核, 4:待签约, 5:已完成, -1:已驳回, -2:已冻结
         */
        getStatus () {
            this.$post('/Ecommerce/getApplyStatus',{},resp => {
                if(resp.code == 1) {
                    this.appStatus = {
                        ...resp.data
                    };

                    if(this.appStatus.wxpay.bank_account_verify === -1) {
                        this.fnCheckResult();
                    }

                    const wxpay = resp.data.wxpay;

                    this.weixinStatus = wxpay.status;

                    // 微信状态设置
                    if(this.weixinStatus == 0) {
                        this.status = '点击设置';
                    } else if(this.weixinStatus == 1) {
                        this.status = '资料审核中';
                    } else if(this.weixinStatus == -1) {
                        this.status = '未通过,查看理由';
                    } else if(this.weixinStatus == -2) {
                        this.status = '已冻结';
                    } else if(this.weixinStatus == 2) {
                        this.status = '账户验证中';
                    } else if(this.weixinStatus == 3) {
                        this.status = '待审核';
                    } else if(this.weixinStatus == 4) {
                        this.status = '待签约';
                    } else if(this.weixinStatus == 5) {
                        this.status = '点击查看';
                    }

                    if(this.weixinStatus == 0 || this.weixinStatus == 1 || this.weixinStatus == -1) {
                        this.step = 0;
                    }
                    if(this.weixinStatus == 2 || this.weixinStatus == 3 || this.weixinStatus == -2) {
                        this.step = 1;
                    }
                    if(this.weixinStatus == 4) {
                        this.step = 2;
                    }
                    if(this.weixinStatus == 5) {
                        this.step = 4;
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 查询微信审核失败原因
         */
        fnCheckResult () {
            this.$post('/EcommerceWxpay/getApplyResult',{},resp => {
                if(resp.code == 1) {
                    this.audit_fail_reason = resp.data.audit_fail_reason;
                }
            });
        },

        /**
         * @description 查询微信申请结果
         *      weixin
         *      alipay
         */
        getAppResult () {
            this.$post('/EcommerceWxpay/getApplyResult',{},resp => {
                if(resp.code == 1) {
                    this.result = resp.data;
                }
            });

            this.$post('/EcommerceAlipay/getApplyResult',{},resp => {
                if(resp.code == 1) {
                    this.alipay_result = resp.data;

                    if(resp.data.status == 0) {
                        this.alipay_status = '点击设置';
                    } else if (resp.data.status == 1) {
                        this.alipay_status = '资料审核中';
                    } else if (resp.data.status == 2) {
                        this.alipay_status = '快去签约';
                    } else if (resp.data.status == 3) {
                        this.alipay_status = '点击查看';
                    } else if (resp.data.status == -1) {
                        this.alipay_status = '已驳回';
                    }

                    this.alipayStatus = (resp.data.status == 0 || resp.data.status == 1 || resp.data.status == -1) ? 0 : (resp.data.status == 2 ? 1 : (resp.data.status == 3 ? 3 : ''));
                } else {
                    this.alipay_status = '点击设置';
                }
            });
        },

        /**
         * @description 微信按钮状态操作
         */
        fnWeixin () {
            let query = {};

            if(this.weixinStatus == 0) {//待提交，去填写资料
                query = {
                    step: 1
                };
            } else if(this.weixinStatus == 1) {//资料待检验
                query = {
                    step: 2,
                    status: 1
                };
            } else if(this.weixinStatus == -1) {//资料审核未通过
                query = {
                    step: 2,
                    audit_fail_reason: this.result.audit_fail_reason.length > 0 ? JSON.stringify(this.result.audit_fail_reason) : '',
                    status: 1
                };

            } else if(this.weixinStatus == 2) {//资料提交审核通过
                query = {
                    step: 2,
                    status: 2
                };
            } else if (this.weixinStatus == -2) {//验证失败
                query = {
                    step: 2,
                    result: -2,
                    verifiCation: true,
                    audit_fail_reason: this.result.audit_fail_reason.length > 0 ? JSON.stringify(this.result.audit_fail_reason) : ''
                };
            } else if(this.weixinStatus == 3) {//待审核
                query = {
                    step: 2,
                    result: 3,
                    verifiCation: true
                };
            } else if(this.weixinStatus == 4) {//待签约
                query = {
                    step: 3
                };
            } else if(this.weixinStatus == 5) {//已完成
                this.$router.push({
                    name: 'finance',
                });
                return;
            }

            setTimeout(()=>{
                this.$router.push({
                    name: 'accountForm',
                    query: query
                });
            },100);
        },

        /**
         * @description 支付宝按钮操作
         */
        fnAlipay () {
            if(this.alipay_result.status !== 3) {
                this.$router.push({
                    name: 'accountAlipayForm'
                });
            }

            if(this.alipay_result.status == 3) {
                this.$router.push({
                    name: 'finance'
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.account-setting {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow: auto;
    box-sizing: border-box;
    background: #ffffff;
    padding-bottom: 32px;
    .container-header {
        padding: 24px 0 24px 24px;
        color: #3F454B;
        font-size: 24px;
        font-weight: 500;
        border-bottom: 1px #F0F2F7 solid;
        min-height: 73px;
    }
    .container-tips {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px 24px;
        color: rgba(245, 166, 35, 1);
        cursor: pointer;
        background: rgba(245, 166, 35, 0.2);
        min-height: 34px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .container-title {
        color: rgba(63, 69, 75, 1);
        font-size: 16px;
        font-weight: 500;
        margin-top: 24px;
        margin-bottom: 24px;
        margin-left: 32px;
    }
    .container-tab {
        width: 100%;
        height: 46px;
        overflow: hidden;
        padding-left: 32px;
    }
    .container-seat {
        width: 100%;
        height: 10px;
        background: #F0F2F7;
    }
    .container-setting {
        width: calc(100% - 48px);
        display: flex;
        align-items: center;
        margin-left: 24px;
        margin-right: 24px;
        box-sizing: border-box;
        background: #FBFBFB;
        border:1px solid rgba(238,238,238,1);
        border-radius: 2px;
        min-height: 379px;
        margin-top: 24px;
        .alipay, .weixin {
            width: calc((100% - 48px) / 2);
            box-sizing: border-box;
        }
        .alipay, .weixin {
            margin-right: 48px;
            .alipay-title, .weixin-title {
                color: #333333;
                font-size: 18px;
                font-weight: 500;
                width: 100%;
                height: 18px;
                margin-top: 24px;
                padding-left: 33px;
                padding-bottom: 32px;
            }
            .alipay-wrap, .weixin-wrap {
                width: 100%;
                height: 291px;
                background: #ffffff;
                margin-left: 32px;
                margin-bottom: 32px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 32px;
                .alipay-logo, .weixin-logo{
                    width: 72px;
                    height: 72px;
                    border-radius: 50%;
                    margin-bottom: 20px;
                }
                .alipay-account {
                   color: rgba(51, 51, 51, 1);
                   font-size: 14px;
                   margin-bottom:  18px;
                   font-weight: 500;
                }
                .alipay-setting, .weixin-setting {
                    width: 120px;
                    height: 36px;
                    border-radius: 4px;
                    background: #20A0FF;
                }
            }
        }
    }
    .container-setting-guid{
        position: relative;
        z-index: 9999;
    }
}

// 未通过理由
.fail-text {
    width: 100%;
    color: #333333;
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 22px;
    text-align: center;
}
.fail-foot {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
}
.zd-dialog-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    .zd-dialog-logo {
        width: 48px;
        height: 48px;
    }
    .zd-dialog-title {
        color: #333333;
        font-size: 16px;
        margin-top: 12px;
        margin-bottom: 16px;
        font-weight: 500;
    }
    .zd-dialog-desc {
        color: #666666;
        font-size: 14px;
        letter-spacing: 0;
        line-height: 22px;
        margin-bottom: 24px;
        text-align: center;
        width: 250px;
    }
    .zd-dialog-button {
        width:180px;
        height:32px;
        background:rgba(32,160,255,1);
        border-radius:4px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 14px;
        cursor: pointer;
    }
}
    .count-tab {
      width: 100%;
      display: flex;
      align-items: center;
      background: #ffffff;
      padding-left: 30px;
      height: 46px;
      min-height: 46px;
      justify-content: space-between;
      padding-right:30px;
    }
    .dialogGuide {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: rgba(0,0,0,.5);
        z-index: 999;
        .fixed {
            width: 67%;
            height: 192px;
            background: #ffffff;
            display: flex;
            padding: 40px 66px 24px 120px;
            box-sizing: border-box;
            justify-content: space-between;
            position: absolute;
            top: 294px;
            left: 365px;
            border-radius: 4px;
            &-list {
                display: flex;
                flex-direction: column;
                width: 120px;
                align-items: center;
                &-logo {
                    width: 72px;
                    height: 72px;
                    margin-bottom: 24px;
                }
                &-button {
                    width:120px;
                    height:36px;
                    background:rgba(32,160,255,1);
                    border-radius:4px;
                    color: #ffffff;
                    text-align: center;
                    line-height: 36px;
                    color: #ffffff;
                    font-size: 14px;
                }
            }
        }
        &-wrap {
            width: 274px;
            height: 112px;
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 20px 0px rgba(0,0,0,0.16);
            border-radius:4px;
            position: absolute;
            top: 400px;
            right:0;
            z-index: 9999;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            &-text {
                width: 242px;
                height: 60px;
                color: #1D2023;
                font-size: 14px;
                line-height: 20px;
                margin-top: 14px;
                margin-left: 16px;
            }
            &-next {
              color: #20A0FF;
              font-size: 14px;
              font-weight: 500;
              margin-left: 216px;
              margin-top: 8px;
            }
        }
        &-next {
            width: 274px;
            height: 132px;
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 20px 0px rgba(0,0,0,0.16);
            border-radius:4px;
            position: absolute;
            top: 90px;
            left: calc((100% - 13rem) / 2 + 11.7rem - 220px);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            &-text {
                width: 242px;
                height: 80px;
                color: #1D2023;
                font-size: 14px;
                line-height: 20px;
                margin-top: 14px;
                margin-left: 16px;
            }
            &-next {
              color: #20A0FF;
              font-size: 14px;
              font-weight: 500;
              margin-left: 216px;
              margin-top: 8px;
            }
        }
        &-money {
            padding: 10px;
            background: #ffffff;
            border-radius: 5px;
            position: absolute;
            top: 3px;
            right: 200px;
            box-sizing: border-box;
            &-text {
                width: 162px;
                height: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
                white-space: nowrap;
                color: #ffffff;
                font-size: 15px;
                background: #f06e2e;
            }
        }
        &-result {
            width: 274px;
            height: 92px;
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 20px 0px rgba(0,0,0,0.16);
            border-radius:4px;
            position: absolute;
            top: 304px;
            left: 251px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            &-text {
                width: 242px;
                height: 40px;
                color: #1D2023;
                font-size: 14px;
                line-height: 20px;
                margin-top: 14px;
                margin-left: 16px;
            }
            &-next {
              color: #20A0FF;
              font-size: 14px;
              font-weight: 500;
              margin-left: 216px;
              margin-top: 8px;
            }
        }
        &-menu{
            width: 190px;
            height: 56px;
            border-radius: 6px;
            background: #fff;
            position: absolute;
            left: 7px;
            top: 545px;
            &-text {
                width: 190px;
                height: 40px;
                margin-top: 8px;
                background:rgba(233,246,255,1);
                color: #20A0FF;
                font-size: 14px;
                line-height: 40px;
                padding-left: 52px;
                cursor: pointer;
            }
        }
    }
    .disable-scroll{
        overflow: hidden;
    }
</style>

<style lane="less">
.account-setting .el-step__title {
    color: #333333;
    font-size: 12px;
    font-weight: 400 !important;
}
.account-setting .el-step__icon {
    border:1px solid rgba(51,51,51,1);
    color: #333333;
    width: 20px;
    height: 20px;
    font-size: 12px;
}
.account-setting .el-step.is-horizontal {
    width: 120px;
    margin-left: 30px !important;
}
.account-setting .el-step.is-center .el-step__line {
    left: 76% !important;
    background-color: #333;
}
.account-setting .el-steps {
    margin-left: -20px;
    margin-top: 36px;
}
.account-setting .el-step .is-success .el-step__icon {
    color: #ffffff;
    border-color: #2FBDB3;
    background-color: #2FBDB3;
}
.account-setting .el-step .is-success .el-step__line .el-step__line-inner {
    border-color: #2FBDB3;
}
.account-setting .el-step .el-step__main .is-success {
    color: #2FBDB3;
}
.account-setting .el-step .is-process .el-step__icon {
    color: #ffffff;
    border-color: #2FBDB3;
    background-color: #2FBDB3;
}
.account-setting .el-step .is-process .el-step__line .el-step__line-inner {
    border-color: #2FBDB3;
}
.account-setting .el-step .el-step__main .is-process {
    color: #2FBDB3;
}
.account-setting .el-tabs__nav-wrap::after {
    background: transparent;
}
.account-setting .is-top {
    color: #3F454B;
    font-size: 16px;
    font-weight: 400;
}
.account-setting .is-active {
    color: #3F454B;
    font-size: 16px;
    font-weight: 600;
}
</style>